<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <body>

        <ui:composition template="./newTemplate.xhtml">
            <ui:define name="content">
                <h:form id="form">
                    <p:growl id="growl" autoUpdate="false" showDetail="true"  life="3000"/>  
                    
                    <p:menubar id="menu">
                        <p:menuitem id="newButton" icon="ui-icon-circle-plus" value="Добавить" actionListener="#{tableNote.menuItemsListener}"
                                    oncomplete="addEditDialog.show();" update=":form:addEditDialog"/>
                        <p:menuitem id="editButton" icon="ui-icon-pencil" value="Изменить" actionListener="#{tableNote.menuItemsListener}"
                                    disabled="#{tableNote.addEdButDis}" oncomplete="addEditDialog.show();" update=":form:addEditDialog"/>
                        <p:menuitem id="delButton" icon="ui-icon-closethick"  disabled="#{tableNote.addEdButDis}"
                                    onclick="deleteDialog.show();"
                                    value="Удалить"/>
                    </p:menubar> 
                    <p:panel header="Записная книжка">
                        <p:dataTable id="notes" var="notes" value="#{tableNote.notes}" 
                                     selection="#{tableNote.selectionNote}" widgetVar="notes"
                                     selectionMode="single" emptyMessage="Записей не найдено" 
                                     filteredValue="#{tableNote.filteredNotes}" style="width: 100%"
                                     rowKey="#{notes.name}">  
                            <p:ajax event="rowDblselect" oncomplete="addEditDialog.show();" update=":form:addEditDialog" listener="#{tableNote.rowDblSelect}"/>
                            <p:ajax event="rowSelect" listener="#{tableNote.rowSelect}" update=":form:menu"/>
                            <p:column id="nameCol" filterBy="#{notes.name}" headerText="Имя" styleClass="dcol">  
                                <h:outputText value="#{notes.name}" />  
                            </p:column>  

                            <p:column id="numCol" filterBy="#{notes.num}" headerText="Телефон" styleClass="dcol">  
                                <h:outputText value="#{notes.num}" />  
                            </p:column>  
                        </p:dataTable>
                        <p:hotkey bind="del" update=":form:notes" onsuccess="deleteDialog.show()"/>
                        <p:hotkey bind="insert" update=":form:notes" actionListener="#{tableNote.addEditNote}" handler="addEditDialog.show();"/>
                    </p:panel>
                    <p:dialog id="addEditDialog" header="#{tableNote.dialogHeader}" modal="true" widgetVar="addEditDialog" 
                              resizable="false" hideEffect="fade" showEffect="fade" closeOnEscape="true" closable="false">  
                        <p:panelGrid columns="2" styleClass="panelGrid" columnClasses="dcol">
                            <p:outputLabel value="Имя" styleClass="olabel"/>
                            <p:outputLabel value="Телефон" styleClass="olabel"/>
                            
                            <p:inputText id="newName" label="Имя" value="#{tableNote.newName}"/>
                            <p:inputMask id="newNum" label="Телефон" value="#{tableNote.newNum}" mask="+79999999999"/>
                        </p:panelGrid>    
                        <div align="right">    
                            <p:commandButton value="OK" styleClass="dbutton" update=":form:notes :form:growl :form:newNum :form:newName :form:menu" 
                                             actionListener="#{tableNote.addEditNote}"
                                             oncomplete="onComplete(xhr, status, args);notes.filter()"/>
                            <p:commandButton value="Отмена" styleClass="dbutton" onclick="addEditDialog.hide();"/>
                        </div>
                    </p:dialog>
                    <p:dialog focus="deleteOk" id="deleteDialog" widgetVar="deleteDialog" header="Удаление записи" 
                                  modal="true" resizable="false" closable="false"
                                  hideEffect="fade" showEffect="fade">
                        <p:outputLabel value="Вы уверены что хотите удалить запись?"/>
                        <p:panelGrid columns="2" styleClass="panelGrid" columnClasses="dcol">
                                <p:commandButton id="deleteOk" value="ОК" styleClass="cbutton" action="#{tableNote.deleteNote}" 
                                             update=":form:notes :form:menu :form:growl" oncomplete="deleteDialog.hide(); notes.filter()"/>
                                <p:commandButton value="Отмена" styleClass="cbutton" onclick="deleteDialog.hide();"/>
                        </p:panelGrid>
                    </p:dialog>
                </h:form>
            </ui:define>
        </ui:composition>

    </body>
</html>
